<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title data-locale="i18n_login">#(_res.get("i18n_login"))-#(_res.get("i18n_appname"))</title>


    <!--STYLESHEET-->
    <!--=================================================-->

    <!--Open Sans Font [ OPTIONAL ]-->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>


    <!--Bootstrap Stylesheet [ REQUIRED ]-->
    <link href="#(RESOURCE_HOST)/static/css/bootstrap.min.css" rel="stylesheet">


    <!--Nifty Stylesheet [ REQUIRED ]-->
    <link href="#(RESOURCE_HOST)/static/css/nifty.min.css" rel="stylesheet">


    <!--Nifty Premium Icon [ DEMONSTRATION ]-->
    <link href="#(RESOURCE_HOST)/static/css/demo/nifty-demo-icons.min.css" rel="stylesheet">


        
    <!--Demo [ DEMONSTRATION ]-->
    <link href="#(RESOURCE_HOST)/static/css/demo/nifty-demo.min.css" rel="stylesheet">


    <!--Magic Checkbox [ OPTIONAL ]-->
    <link href="#(RESOURCE_HOST)/static/plugins/magic-check/css/magic-check.min.css" rel="stylesheet">


    <!--=================================================

    REQUIRED
    You must include this in your project.


    RECOMMENDED
    This category must be included but you may modify which plugins or components which should be included in your project.


    OPTIONAL
    Optional plugins. You may choose whether to include it in your project or not.


    DEMONSTRATION
    This is to be removed, used for demonstration purposes only. This category must not be included in your project.


    SAMPLE
    Some script samples which explain how to initialize plugins or components. This category should not be included in your project.


    Detailed information and more samples can be found in the document.

    =================================================-->
        

</head>

<!--TIPS-->
<!--You may remove all ID or Class names which contain "demo-", they are only used for demonstration. -->

<body>
	<div id="container" class="cls-container">
		
		<!-- BACKGROUND IMAGE -->
		<!--===================================================-->
		<div id="bg-overlay"></div>

		<!-- LOGIN FORM -->
		<!--===================================================-->
		<div class="cls-content">
		    <div class="cls-content-sm panel">
		        <div class="panel-body">
		            <div class="mar-ver pad-btm">
		                <h3 class="h4 mar-no" data-locale="i18n_appname">#(_res.get("i18n_appname"))</h3>
		            </div>
		            <form id="login-form" action="#" method="post">
		                <div class="form-group">
		                    <input name="loginName" type="text" class="form-control" placeholder='#(_res.get("i18n_account"))' autofocus>
		                </div>
		                <div class="form-group">
		                    <input name="password" type="password" class="form-control" placeholder='#(_res.get("i18n_password"))'>
		                </div>
		                <div class="checkbox pad-btm text-left">
		                    <input name="rememberMe" id="demo-form-checkbox" class="magic-checkbox" type="checkbox">
		                    <label for="demo-form-checkbox">#(_res.get("i18n_remeberMe"))</label>
		                </div>
		                <button id="login" class="btn btn-primary btn-lg btn-block" type="button">#(_res.get("i18n_login"))</button>
		            </form>
		        </div>
		
		        <div class="pad-all">
		            <a href="pages-password-reminder.html" class="btn-link mar-rgt">#(_res.get("i18n_forgotPD"))？</a>
		            <a href="pages-register.html" class="btn-link mar-lft">#(_res.get("i18n_register"))</a>
		
		            <div class="media pad-top bord-top">
		                <div class="pull-right">
		                    <a href="#" class="pad-rgt"><i class="demo-psi-facebook icon-lg text-primary"></i></a>
		                    <a href="#" class="pad-rgt"><i class="demo-psi-twitter icon-lg text-info"></i></a>
		                    <a href="#" class="pad-rgt"><i class="demo-psi-google-plus icon-lg text-danger"></i></a>
		                </div>
		                <div class="media-body text-left">
							#(_res.get("i18n_otherLogin"))
		                </div>
		            </div>
		        </div>
		    </div>
		</div>
		<!--===================================================-->
		
		<!-- DEMO PURPOSE ONLY -->
		<!--===================================================-->
		<div class="demo-bg">
		    <div id="demo-bg-list">
		        <div class="demo-loading"><i class="psi-repeat-2"></i></div>
		        <img class="demo-chg-bg bg-trans active" src="#(RESOURCE_HOST)/static/img/bg-img/thumbs/bg-trns.jpg" alt="Background Image">
		        <img class="demo-chg-bg" src="#(RESOURCE_HOST)/static/img/bg-img/thumbs/bg-img-1.jpg" alt="Background Image">
		        <img class="demo-chg-bg" src="#(RESOURCE_HOST)/static/img/bg-img/thumbs/bg-img-2.jpg" alt="Background Image">
		        <img class="demo-chg-bg" src="#(RESOURCE_HOST)/static/img/bg-img/thumbs/bg-img-3.jpg" alt="Background Image">
		        <img class="demo-chg-bg" src="#(RESOURCE_HOST)/static/img/bg-img/thumbs/bg-img-4.jpg" alt="Background Image">
		        <img class="demo-chg-bg" src="#(RESOURCE_HOST)/static/img/bg-img/thumbs/bg-img-5.jpg" alt="Background Image">
		        <img class="demo-chg-bg" src="#(RESOURCE_HOST)/static/img/bg-img/thumbs/bg-img-6.jpg" alt="Background Image">
		        <img class="demo-chg-bg" src="#(RESOURCE_HOST)/static/img/bg-img/thumbs/bg-img-7.jpg" alt="Background Image">
		    </div>
		</div>
		<!--===================================================-->
		

	</div>
	<!--===================================================-->
	<!-- END OF CONTAINER -->

	<!--JAVASCRIPT-->
	<!--=================================================-->

	<!--Pace - Page Load Progress Par [OPTIONAL]-->
	<link href="#(RESOURCE_HOST)/static/plugins/pace/pace.min.css" rel="stylesheet">
	<script src="#(RESOURCE_HOST)/static/plugins/pace/pace.min.js"></script>


	<!--jQuery [ REQUIRED ]-->
	<script src="#(RESOURCE_HOST)/static/js/jquery-2.2.4.min.js"></script>


	<!--BootstrapJS [ RECOMMENDED ]-->
	<script src="#(RESOURCE_HOST)/static/js/bootstrap.min.js"></script>


	<!--NiftyJS [ RECOMMENDED ]-->
	<script src="#(RESOURCE_HOST)/static/js/nifty.min.js"></script>

	<!--=================================================-->

	<!--Background Image [ DEMONSTRATION ]-->
	<script src="#(RESOURCE_HOST)/static/js/demo/bg-images.js"></script>

	<!-- Cookie -->
	<script src="#(RESOURCE_HOST)/static/js/demo/cookie.js"></script>

	<!-- i18n -->
	<script src="#(RESOURCE_HOST)/static/js/demo/i18n.js"></script>
	<!--=================================================-->

	<!--jquery.i18n.properties-->
	<!--<script src="#(RESOURCE_HOST)/static/plugins/jquery-i18n-properties/jquery.i18n.properties.js"></script>
	<script src="#(RESOURCE_HOST)/static/js/demo/i18n.js"></script>-->
	<!--=================================================-->

	<script type="text/javascript">
		$("#login").click(function () {
			$.ajax({
                //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "#(ctxPath)/postLogin" ,//url
                data: $('#login-form').serialize(),
                success: function (result, status, xhr) {
                    //保存Jwt token 给LayIM 验证是使用
                    setCookie("token",xhr.getResponseHeader('Jwt'),null);//关闭浏览器清除
                    // console.log(xhr.getResponseHeader('jwt'));
                    window.location.href = "/";
				},
				error : function() {
					alert("异常！");
				}
			})
		})
	</script>

</body>
</html>
